import React, { useCallback, useEffect, useState } from 'react';
import { Search, ArrowLeft } from '@react-vant/icons';
import { ProductCard, Field, Tabs } from 'react-vant';
import { useNavigate, useLocation } from 'react-router-dom';
import TopTitleBar from '../../components/TopTitleBar';
import axios from '../../utils/axios';
import './index.css';
import { baseURL } from '../../utils/contants';
const SearchPage = () => {
    const tabSearchValuesMap = [
        {
            title: '推荐',
            orderBy: ''
        },
        {
            title: '新品',
            orderBy: 'new'
        },
        {
            title: '价格',
            orderBy: 'price'
        },
    ]
    const navigate = useNavigate();
    const location = useLocation();
    const goodsCategoryId = location?.state?.goodsCategoryId
    const [searchVal, setSearchVal] = useState('');
    const [searchResult, setSearchResult] = useState([]);
    // 在分类和首页，顶部都有一个 搜索框；
    // 样式不同，但是呢，都能跳转到搜索列表的页面去！！
    // navigate  过去 搜索列表页面！
    // from 传不同的参数！！！
    const handleSearch = (orderBy) => {
        getSearchResults(orderBy);
        // 获取了 input 的 输入内容，然后 保存起来 发送ajax 请求；        
    }

    const fieldOnBlur = (e) => {
        setSearchVal(e.target.value);
    }
    const getSearchResults = (orderBy) => {
        axios.get('/api/v1/search', {
            params: {
                pageNumber: 1,
                keyword: searchVal,
                goodsCategoryId: goodsCategoryId || undefined,  //特殊情况！
                orderBy: orderBy,// 默认是空字符串， 还有 new， price ，一共3种情况！
            }
        }).then(searchres => {
            if (searchres.data.message === 'SUCCESS') {
                // 填充 并且 map 具体的 卡片数据：
                setSearchResult(searchres.data.data.list);
            }
        })
    }
    useEffect(() => {
        if (goodsCategoryId) {
            getSearchResults();
        }
    }, [])
    return (
        <div className="searchPage">
            < TopTitleBar
                leftIcon={<ArrowLeft onClick={() => navigate(-1)} />}
                rightIcon={
                    <div className='searchBtn'>
                        搜索
                    </div>
                }
                rightIconStyle="rightIconStyle"
                lable={
                    //放大镜 的 icon
                    <Search />
                }
                searchBackground
                topTitleBarBackgroundColor='#fff'
                searchRightText={
                    <Field border={false} onBlur={fieldOnBlur} />
                }
                rightIconFun={() => handleSearch('')}
            />
            {/* 用 List 组件，加载，页面的参数！ */}
            <div className="mainContent">

                <Tabs type='card'
                    titleActiveColor='#fff'
                    color='#1baeae'
                    onChange={
                        (name) => handleSearch(name)
                    }
                >
                    {tabSearchValuesMap.map(item => (
                        <Tabs.TabPane
                            key={item.orderBy}
                            name={item.orderBy}
                            title={item.title}
                        >
                            {/* 卡片标签页 {item.orderBy} */}
                            {/* 改变的时候，把 这个 key 传递过去，然后 渲染出来！  */}

                            {
                                searchResult.map(product => {
                                    // onClick事件 再把 goodsId 传过去，进入详情页面！
                                    return <ProductCard
                                        key={product.goodsId}
                                        price={'¥' + product.sellingPrice}
                                        desc={product.goodsIntro}
                                        title={product.goodsName}
                                        thumb={baseURL + product.goodsCoverImg}
                                        onClick={() => navigate('/productDetails', {
                                            state: {
                                                goodsId: product.goodsId
                                            }
                                        })}
                                    />
                                })
                            }

                        </Tabs.TabPane>
                    ))}
                </Tabs>

                {/*  */}
            </div>
        </div>
    )
}

export default SearchPage;
